<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           :obj="obj">
    <template slot="title-left">
      <div class="richeng-title">
        <div>
          <i class="iconfont iconcalendar-todo-fill color-span title-span"></i>
          <span class="title-span">{{obj.name}}</span>
        </div>
        <el-button type="text"
                   @click="getPlatformComponentsPath($router, `/customer/schedule/index&prefix=/admin&name=日程`)">查看更多</el-button>
      </div>
    </template>
    <template slot="content">
      <week :events="events"
            @update-time="updateTime"
            @update-week="(t)=>{time=t; getData()}"></week>
      <div class="richeng-warpHeight"
           v-if="events.filter(res=>res.startTime.substr(0,10) === currentTime).length > 0">
        <div class="richeng-warp"
             v-for="(item,index) in events.filter(res=>res.startTime.substr(0,10) === currentTime)"
             :key="index">
          <span @click="getPlatformComponentsPath($router, `/customer/schedule/index?startTime=${item.startTime}&id=${item.id}&prefix=/admin&name=日程`)">{{item.title}}</span>
          <span>{{item.startTime.substr(0,10)}}</span>
        </div>
      </div>
      <div v-else
           class="no-data">
        <img src=""
             alt="">
        <span>暂无数据</span>
      </div>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import week from './week'
import { getPlatformComponentsPath } from '../../util/util'
import { getSysSchedule } from './config'

export default {
  components: { dragger, week },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      events: [],
      currentTime: '',
      time: {}
    }
  },
  methods: {
    updateTime (time) {
      this.currentTime = time
    },
    getData () {
      if (!this.time.endDate) return
      getSysSchedule([this.$store.getters.userInfo.userId], this.time.endDate, this.time.startDate).then(res => {
        this.events = res.data.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  img {
    margin-bottom: 10px;
  }
}
.richeng {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
  &-warpHeight {
    height: calc(100% - 120px);
    overflow: auto;
  }
  &-warp {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    margin: 5px 10px;
    border-bottom: 1px solid #ebebeb;
    &:nth-child(1) {
      border-top: 1px solid #ebebeb;
    }
    & > span:nth-child(1) {
      width: calc(100% - 150px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
      color: #808080;
      cursor: pointer;
    }
    & > span:nth-child(2) {
      width: 100px;
      text-align: right;
      color: #999;
    }
  }
}
</style>